<template>
		<view class="log-item">
			<view class="log-node" :style="nodeStyle">
				<slot name="node" :data="logisticsData">
					<view class="node-dot"></view>
				</slot>
			</view>
			<view class="log-content">
				<slot name="content" :data="logisticsData">
					<view>
						<view v-if="logisticsData.statusLabel" class="content-title">{{ logisticsData.statusLabel }}</view>
						<view class="content-desc">{{ logisticsData.info }}</view>
						<view class="content-time">{{ logisticsData.time }}</view>
					</view>
				</slot>
			</view>
		</view>
</template>

<script setup lang="ts">
	import { computed } from "vue";
	
	const props = defineProps({
		top: {
			type: [String, Number]
		},
		logisticsData: Object
	})
	
	const nodeStyle = computed(() => {
		let style: { top?: string } = {};
		if (props.top) {
			style.top = props.top + "rpx";
		}
		return style;
	})
</script>

<style lang="scss" scoped>
	.log-item {
		&::before {
			content: " ";
			position: absolute;
			left: calc(1.5625rem / 2);
			top: 1.5625rem;
			width: 0.0625rem;
			height: calc(100% - 1.5625rem / 2);
			background-color: #e6e6e6;
			transform: translateX(-50%);
		}
		&:last-child {
			&::before {
				height: 0;
			}
		}
		display: flex;
		width: 100%;
		position: relative;
		margin-bottom: 32rpx;
		.log-node {
			flex-grow: 0;
			flex-shrink: 0;
			width: 1.5625rem;
			height: 1.5625rem;
			display: flex;
			align-items: center;
			justify-content: center;
			.node-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 100rpx;
				background-color: #AAAAAA;
			}
		}
		.log-content {
			padding-left: 0.8rem;
			margin-top: 0.12rem;
			.content-title {
				font-weight: bold;
				font-size: 1rem;
			}
			.content-desc {
				margin: 10rpx 0;
				font-size: 0.9rem;
				color: #aaa;
			}
			.content-time {
				font-size: 0.8rem;
				color: #aaa;
			}
		}
	}
</style>